@mixin common {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

:host {
    display: block;
    position: relative;
    width: 280px;
    height: 180px;

    .color-svpanel__white {
        @include common;
        background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
    }

    .color-svpanel__black {
        @include common;
        background: linear-gradient(0deg, #000, transparent);
    }

    .color-svpanel__cursor {
        position: absolute;

        div {
            cursor: pointer;
            width: 6px;
            height: 6px;
            box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
                0 0 1px 2px rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            transform: translate(-3px, -3px);
        }
    }
}